---
id: meta-contributing
title: Contributing
sidebar_label: Contributing
---

Thank you for showing interest in contributing to React-Native-Navigation! This project is developed and maintained by Wix in collaboration with the community.

There are various ways in which you can contribute to this library, not all require knowledge or expertise in native development. Listed below is all you need to get started with your first contribution.

## Stack Overflow

Stack Overflow is used by developers to find answers and troubleshoot code. Users are encouraged to post questions on SO and tag them with the [wix-react-native-navigation](https://stackoverflow.com/questions/tagged/wix-react-native-navigation) tag. Answering issues on SO is very helpful and beneficial to the community, only this time, there's a personal angle - you can boost your SO ranking and rack up points quickly.

## Discord

Another popular communication channel is our [Discord channel](https://discord.gg/DhkZjq2) where users post questions and consult with each other. You're welcome to join the discussions and answer questions. This is also a great place to meet other community members and project maintainers.

## Contributing to React-Native-Navigation

### iOS

There are 2 ways to test your contribution to this project on iOS:

1. You can contribute and test your changes using the playground provided.


2. You can install React-Native-Navigation in a new or existing project and set your project to use your local clone of React-Native-Navigation in the podfile.
The following steps are required in order to make the project work with your local environment:

#### 2.1

Install React-Native-Navigation as you'll usually do in your project, using `yarn add react-native-navigation` or `npm install --save react-native-navigation`.

#### 2.2

Add the following configuration to the `react-native.config.js` file, at the root of your project.

```javascript
module.exports = {
	project: {
		ios: {},
		android: {},
	},
	dependencies: {
		'react-native-navigation': {
			platforms: {
				ios: null,
				android: null
			},
		},
	},
};
```

#### 2.3

Clone the project using `git clone https://github.com/wix/react-native-navigation` at your desired location.

#### 2.4

Add the following line in the Podfile:

```ruby
pod 'ReactNativeNavigation', :path => '/path/to/cloned/react-native-navigation'
```

You're done. Happy coding!

## GitHub Issues

### Open an issue
Found a bug? Missing a feature? Go ahead and open an issue! Make sure to add all details mentioned in the issue template. If you're interested in suggesting a big change, please speak to one of the admins on [Discord](#discord) to coordinate your effort.

### Respond to issues
Although the issue tracker is used solely for bug reports, issues are frequently opened for questions or to request assistance. As the project grows in popularity, more issues remain unanswered for long periods of time.

Some issues can be trivial and easy to pinpoint - a missing import statement or apostrophe, wrong layout structure, etc. If you're an experienced user, helping out newcomers can be quite satisfying and allows maintainers to focus on features and bug fixes.

Some issues are tagged as ["looking for contributors"](https://github.com/wix/react-native-navigation/labels/user%3A%20looking%20for%20contributors). These issues have been recognized by the team, but aren't prioritized by Wix developers due to lack of time or for some other reason. We leave these issues to our community and you're more than welcome to take a crack at them. If you'd like to submit a PR, see [these instructions](#running-the-project) on how to run the project locally.

### Provide reproductions
Reproducing bugs takes time. Lots of time. Usually that's because an issue is lacking important information, which then causes lots of back and forth communication between maintainers and users. Help us address more bugs and issues by providing reproductions.

Providing reproductions improves the chances of an issue being prioritized by maintainers!

If an issue is reproduced with a specific combination of options, posting these options will usually suffice. If a specific layout structure is involved or specific actions need to be performed in a certain order - then we ask that you fork the project and push a branch with a reproduction to the Playground app.

Check out the [list of issues requiring reproductions](https://github.com/wix/react-native-navigation/labels/user%3A%20requires%20reproduction).

## Submitting PRs
So you've fixed a bug or added a feature and you're ready to submit a pull request 🎉🎊 Make sure the title is clear and describes the reason for the PR. Please include any information you can which will help us understand the reasons for the PR, what it fixes and what it changes. Please include before/after pictures/gifs when appropriate.

## Workflow
This project is driven by tests. Before implementing any feature or fixing any bug, a failing test (e2e or unit or both) should be added, depending on the environment of where the fix should be implemented. For example, for an API change, a failing e2e should be written. For a small bug fix in Android, for example, a unit test in Android should be added.

This will ensure good quality throughout the life of the project and will help avoid unexpected breakages.

No PR will be accepted without adequate test coverage.

If you need help running the project, have a look at the [Playground app](playground-app) section. You can run the tests using the scripts below.


### Tests and the Playground app
Besides an overview of basic React Native Navigation functionality, the [Playground app](playground-app) can (and rather should) be used for e2e tests and reproductions. If your change requires an e2e, add it to the playground app, to the appropriate screen. Again, quick setup instructions available in [Playground app](playground-app) section of these docs.

:::tip
If a screen contains too many buttons, e2e tests might fail if the button is positioned out of screen bounds because Detox matchers detect it's invisible.
:::

### Enable linter
The project uses [ESLint](https://eslint.org/) with [Prettier](https://prettier.io/) to ensure code style consistency across the codebase. Make sure to install these plugins in your IDE.

A pre-commit hook will verify that the linter passes when committing.

### Project Folder Structure

| Folder | Description |
| ------ | ----------- |
| `src` | TypeScript sources and unit tests |
| `android` | Android sources and unit tests |
| `ios` | iOS sources and unit tests |
| `lib` | Compiled JavaScript and TypeScript definitions (generated by `react-native-builder-bob`) |
| `lib/module/index.js` | The entry point for `import Navigation from 'react-native-navigation'` |
| `playground` | The playground app workspace. Contains its own `src`, `android`, `ios`, and `package.json`. All e2e tests run against this app. |
| `playground/e2e` | [detox](https://github.com/wix/detox) e2e tests on both Android and iOS |
| `integration` | Misc JavaScript integration tests, proving integration with other libraries like redux |
| `scripts` | All build and test scripts |
| `autolink` | Autolinking scripts for React Native CLI |

### Scripts

This project uses [Yarn workspaces](https://yarnpkg.com/features/workspaces). The root workspace contains the main library, and the `playground` workspace contains the playground app for testing.

| Command | Description |
| ------- | ----------- |
| `yarn install` | installs dependencies for all workspaces |
| `yarn prepare` | compiles TypeScript sources `./src` into JavaScript `./lib` (runs automatically on install) |
| `yarn clean` | cleans all build directories, stops packager, fixes flakiness by removing watchman cache, etc. |
| `yarn start` | starts the react-native packager for local debugging |
| `yarn xcode` | for convenience, opens xcode in this project |
| `yarn pod-install` | installs iOS pods (runs `yarn workspace react-native-navigation-playground pod-install`) |
| `yarn install-android`  |  builds playground debug/release version and installs on running android devices/emulators. <br></br> **Options:** `-- --release` |
| `yarn uninstall-android` | uninstalls playground from running android devices/simulators |
| `yarn test-js` | runs javascript tests and coverage report |
| `yarn test-autolink` | runs autolink tests |
| `yarn test-unit-ios` | runs ios unit tests in debug/release <br></br> **Options:** `-- --release` |
| `yarn test-unit-android` | runs android unit tests in debug/release <br></br> **Options:** `-- --release` |
| `yarn test-snapshot-ios` | runs ios snapshot tests <br></br> **Options:** `-- --release` |
| `yarn test-e2e-ios-ci` | runs the ios e2e tests using [detox](https://github.com/wix/detox) in CI mode (release, multi-device) |
| `yarn test-e2e-android-ci` | runs the android e2e tests using [detox](https://github.com/wix/detox) in CI mode (release, multi-device) |
| `yarn workspace react-native-navigation-playground test-e2e-ios` | runs the ios e2e tests using [detox](https://github.com/wix/detox) in debug/release <br></br> **Options:** `-- --release` |
| `yarn workspace react-native-navigation-playground test-e2e-android` | runs the android e2e tests using [detox](https://github.com/wix/detox) in debug/release <br></br> **Options:** `-- --release` |
| `yarn test-all` | runs all tests in parallel (js, autolink, unit, snapshot, e2e) |
